import { ref } from "vue";
import { useIntersectionObserver } from "@vueuse/core";
// 传入获取数据方法
export default function useLazeData(apiFunction) {
  // 创建获取元素的ref,
  const target = ref();
  // 创建变量用于储存数据;
  const result = ref();

  const { stop } = useIntersectionObserver(
    target,
    ([{ isIntersecting }]) => {
      // 判断元素是否进入可视区
      if (isIntersecting) {
        // 进入可视区则停止监听
        stop();
        // 当元素进入可视区时获取数据
        apiFunction().then((data) => {
          result.value = data.result;
        });
      }
    },
    { threshold: 0 }
  );
  // 返回监听元素
  return {
    target,
    result,
  };
}
